<!-- CellComponents/CellTextButton.vue -->
<template>
  <div class="cell-text-button" :style="columnWidth ? { width: columnWidth } : {}">
    <input
        type="text"
        :value="modelValue"
        @input="handleInput"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
        class="text-input"
    />
    <button @click="openPopup" class="button">...</button>

    <!-- 弹出窗体 -->
    <div v-if="showPopup" class="popup">
      <div class="popup-content">
        <h3>编辑值</h3>
        <input
            v-model="popupValue"
            @input="handlePopupInput"
            placeholder="在这里输入新值"
            class="popup-input"
        />
        <div class="popup-buttons">
          <button @click="confirmPopup" class="confirm-button">确认</button>
          <button @click="closePopup" class="cancel-button">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CellTextButton',
  props: ['modelValue','columnWidth'],
  emits: ['update:modelValue', 'focus', 'blur', 'input'],
  computed: {
    getInputStyle() {
      return this.columnWidth ? { width: `calc(100% - 20px)` } : {};
    }
  },
  data() {
    return {
      showPopup: false,
      popupValue: ''
    }
  },
  methods: {
    handleInput(event) {
      this.$emit('update:modelValue', event.target.value);
      this.$emit('input', event.target.value);
    },
    openPopup() {
      this.showPopup = true;
      this.popupValue = this.modelValue;
    },
    closePopup() {
      this.showPopup = false;
    },
    handlePopupInput(event) {
      this.popupValue = event.target.value;
    },
    confirmPopup() {
      this.$emit('update:modelValue', this.popupValue);
      this.$emit('input', this.popupValue);
      this.closePopup();
    }
  }
}
</script>

<style scoped>
.cell-text-button {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}
.text-input {
  flex-grow: 1;
  min-width: 0;
  padding: 2px 4px;
  border: none;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  height: 100%;
}
.button {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
